<template>
    <view>
        <!-- <u-navbar title="运费"></u-navbar> -->
        <view v-for="item in list" class="item">
            <view class="top u-flex u-row-between">
                <view>{{ item.name }}</view>
                <view class="u-flex">
                    <image class="del" @click="del(item.id)" :src="BaseUrl + '/static/wImg/delGrey.png'"></image>
                    <image
                        class="edit"
                        @click="$func.jump('/wNew/pages/addTemplate?id=' + item.id)"
                        :src="BaseUrl + '/static/wImg/editGrey.png'"
                    ></image>
                </view>
            </view>
            <view class="bot" v-for="(items, indexs) in item.children" :key="indexs">
                <view class="zi">{{ item.isdelivery == 1 ? "包邮" : "可配送地区" }}</view>
                <view class="address" style="display: flex; flex-wrap: wrap" v-if="item.isdelivery != 1">
                    <view class="" style="display: flex; flex-wrap: wrap">
                        <view class="" v-for="(itemd, indexd) in items.address" :key="indexs">{{ itemd }}</view>
                    </view>
                    ....
                </view>
                <view class="u-flex u-row-between m-t-30">
                    <view class="tit">首件 {{ items.first }}件</view>
                    <view class="price">运费{{ items.first_fee }}元</view>
                </view>
                <view class="u-flex u-row-between m-t-30">
                    <view class="tit">续重 {{ items.additional }}KG</view>
                    <view class="price">运费{{ items.additional_fee }}元</view>
                </view>
            </view>
        </view>
        <!-- <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			
		</mescroll-body> -->
        <view class="btn u-flex-center" @click="$func.jump('/wNew/pages/addTemplate')"> 新增运费模板 </view>
        <view style="height: 100rpx"></view>
        <uv-tabbar :value="currentTab" @change="changeTab">
            <uv-tabbar-item :text="item.text" v-for="(item, index) in tabsList" :key="index">
                <!-- <template v-slot:active-icon>
                    <image class="icon" :src="item.iconPath"></image>
                </template>
                <template v-slot:inactive-icon>
                    <image class="icon" :src="item.selectedIconPath"></image>
                </template> -->
            </uv-tabbar-item>
        </uv-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            BaseUrl,
            tabList: [
                {
                    iconPath: BaseUrl + "/static/wdcp-fl.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-fl-active.png",
                    text: "商品",
                },
                {
                    iconPath: BaseUrl + "/static/wdcp-dd.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-dd-active.png",
                    text: "订单",
                },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-sh.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-sh-active.png",
                //     text: "审核",
                // },
                {
                    iconPath: BaseUrl + "/static/wdcp-yf.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-yf-active.png",
                    text: "运费",
                },
                {
                    iconPath: BaseUrl + "/static/wdcp-wd.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-wd-active.png",
                    text: "我的",
                },
            ],
            current: 2,
            list: [],
            current_page: 0, //分页
            total: 0, //总条数
        };
    },
    onShow() {
        this.current_page = 1;
        this.list = [];
        this.getList();
    },
    //触底加载
    onReachBottom() {
        if (this.list.length == this.total) return;
        this.current_page++;
        this.getList();
    },
    methods: {
        //运费模板列表
        getList() {
            this.$u
                .post("/api/shop/get_logistics_list", {
                    type: 2,
                    page: this.current_page,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.list = res.data.data;
                        this.total = res.data.total;
                        // this.MescrollMixin.optDown.use = false;
                        // this.MescrollMixin.optUp.textNoMore = "- 已经到底啦 -";
                    }
                });
        },
        upCallback(page) {
            // this.MescrollMixin.optDown.use = false;
            // this.MescrollMixin.optUp.textNoMore = "- 已经到底啦 -";
            // this.$u.post('/sinology/scholar_detail', {
            // 	page: page.num,
            // 	limit: page.size,
            // 	id: this.id,
            // 	type: this.current > 0 ? this.current : ''
            // }).then(res => {
            // 	this.mescroll.endBySize(res.data.articles.length, res.data.total);
            // 	if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
            // 	this.list = this.list.concat(res.data.articles); //追加新数据
            // 	this.scholar = res.data.scholar
            // }).catch(() => {
            // 	//联网失败, 结束加载
            // 	this.mescroll.endErr();
            // })
        },
        changeTab(e) {
            if (e == 0) {
                uni.redirectTo({ url: "/yCreate/pages/goodsManagement" });
            } else if (e == 1) {
                uni.redirectTo({ url: "/yCreate/pages/orderManagement" });
            } else if (e == 3) {
                uni.redirectTo({ url: "/wNew/pages/mine" });
            }
            // else if (e == 4) {
            // uni.redirectTo({ url: "/yCreate/pages/reviewOrder" });
            // }
        },
        //删除运费模板
        del(id) {
            uni.showModal({
                title: "",
                content: "确认删除吗?",
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        this.$request.post("api/wanlshop.merchant/del_logistics", { ids: id }).then((res) => {
                            console.log(res, "890-90-80-80-");
                            uni.showToast({
                                title: res.msg,
                                icon: "none",
                            });
                            this.list = [];
                            this.getList();
                        });
                    } else if (cancel) {
                        console.log("用户点击取消");
                    }
                },
            });
        },
    },
};
</script>

<style>
page {
    width: 100%;
    padding: 0 33rpx;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.m-t-30 {
    margin-top: 30rpx;
}

.item {
    padding: 0 30rpx 31rpx;
    background: #fff;
    border-radius: 10rpx;
    margin-top: 30rpx;

    .top {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #dfdfdf;

        .del {
            width: 36rpx;
            height: 36rpx;
        }

        .edit {
            width: 34rpx;
            height: 34rpx;
            margin-left: 28rpx;
        }
    }

    .bot {
        padding-top: 30rpx;

        .zi {
            font-size: 28rpx;
            color: #222;
        }

        .address {
            font-size: 24rpx;
            color: #222;
            margin-top: 20rpx;
            line-height: 40rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            height: 110rpx;
        }

        .tit {
            font-size: 28rpx;
            font-weight: bold;
            color: #222;
        }

        .price {
            font-size: 28rpx;
            color: #222;
        }
    }
}

.btn {
    width: 630rpx;
    height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 240rpx;
    background: linear-gradient(135deg, #ff4950 0, #ff8123 100%);
    border-radius: 40rpx;
}
.text-cut-four {
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
</style>
